<template>
  <div class="cycle-time">
    <div class="left-out">
      <div class="left">
        <h3 class="title f18"><i class="icon"></i>商品分类</h3>
        <a-tree
          class="pl20 pr10"
          blockNode
          :data="data"
          :fieldNames="{
            key: 'categoryId',
            title: 'name',
            children: 'children'
          }"
          :default-expand-all="false"
          :default-expand-selected="true"
          :selected-keys="defaultSelectedKeys"
          @select="clickNode"
          @expand="clickNode"
        >
          <template #title="node">
            <div class="jzt-flex-start">
              <p class="text-over" style="max-width: 120px; display: inline-block" :title="node.name">{{ node.name }}</p>
            </div>
          </template>
          <template #extra="node">
            <a-tag v-if="node.configurationType === 2" :color="'#d9edff'" size="small" style="color: #007dff">已配置</a-tag>
            <a-tag v-if="node.configurationType === 1" :color="'#d9edff'" size="small" style="color: #007dff">部分配置</a-tag>
          </template>
        </a-tree>
      </div>
      <div class="right">
        <header class="jzt-flex-bt pr20" v-if="prodTimeObj.categoryId">
          <h3 class="title f18"><i class="icon"></i>{{ prodTimeObj.name }}</h3>
          <div class="time-wrap jzt-flex-center">
            <span class="f12">商品生产周期</span>
            <div @click.stop>
              <a-input-number
                class="jzt-arco-input-number ml5 mr5"
                v-model="prodTimeObj.days"
                :min="1"
                :max="365"
                mode="button"
                placeholder="请输入"
                style="width: 154px"
              />
            </div>
            <span class="f12 mr10 jzt-block">天</span>
            <a-popover title="" position="br" :content-style="{ fontSize: '12px', width: '400px' }">
              <icon-question-circle-fill />
              <template #content>
                <p>在一级分类配置的生产周期会自动沿用到子级分类中，如子级分类单独设置生产周期，则根据子级周期为准。</p>
              </template>
            </a-popover>
          </div>
        </header>
        <div ref="containerRef" style="height: calc(100% - 62px); overflow-y: auto; box-sizing: border-box">
          <a-alert v-if="prodTimeObj.categoryId" closable>
            <template #icon>
              <icon-exclamation-circle-fill />
            </template>
            <p class="f12 pt16 pb16 pr24 pl0" style="color: #606266">
              请根据产品生产到发货的准确时间，配置的生产周期，会在接单后根据配置的时间进行计时，延迟发货可能会存在一定处罚，请谨慎配置！
            </p>
          </a-alert>
          <a-collapse class="pd20" v-if="prodTimeObj?.children?.length > 0" expand-icon-position="right">
            <a-collapse-item
              v-for="(item, index) in prodTimeObj.children"
              :key="item.categoryId"
              :id="`L${item.categoryId}`"
              :name="`item${index + 1}`"
            >
              <template #header>
                <div class="jzt-flex-bt pr20" style="width: 100%">
                  <p class="f14">{{ item.name }}</p>
                  <div class="time-wrap jzt-flex-center">
                    <span class="f12">商品生产周期</span>
                    <div @click.stop>
                      <a-input-number
                        mode="button"
                        class="ml5 mr5 jzt-arco-input-number"
                        v-model="item.days"
                        :min="1"
                        :max="365"
                        placeholder="请输入"
                        style="width: 154px"
                      />
                    </div>
                    <span class="f12">天</span>
                  </div>
                </div>
              </template>
              <div v-for="(item2, index2) in item.children" :key="item2.categoryId" :id="`L${item2.categoryId}`">
                <div class="jzt-flex-bt pr20 mb20" style="width: 100%">
                  <p class="f14">{{ item2.name }}</p>
                  <div class="time-wrap jzt-flex-center">
                    <span class="f12">商品生产周期</span>
                    <div @click.stop>
                      <a-input-number
                        mode="button"
                        class="ml5 mr5 jzt-arco-input-number"
                        v-model="item2.days"
                        :min="1"
                        :max="365"
                        placeholder="请输入"
                        style="width: 154px"
                      />
                    </div>
                    <span class="f12">天</span>
                  </div>
                </div>
              </div>
            </a-collapse-item>
          </a-collapse>
          <a-empty v-else description="这里暂时什么都没有" />
        </div>
        <footer class="jzt-flex-end pr12" v-if="prodTimeObj.categoryId">
          <a-button type="primary" @click="submit">保存设置</a-button>
        </footer>
      </div>
    </div>
    <div class="right-out">
      <template v-if="prodTimeObj.categoryId">
        <header class="jzt-flex-bt pr20">
          <h3 class="title f18"><i class="icon"></i>基础服务设置</h3>
        </header>
        <div class="content pd20">
          <div class="gray-block jzt-flex-bt pt10 pb10 pl20 pr20">
            <div class="jzt-flex-center">
              <p class="mr10">{{ switchObj.isMeasure ? "" : "不" }}支持测量服务</p>
              <a-tag color="#e3f9e9" size="small" v-if="switchObj.isMeasure === 1" style="color: #14c85c">
                <icon-check-circle-fill />已启用
              </a-tag>
            </div>
            <a-switch v-model="switchObj.isMeasure" :checked-value="1" :unchecked-value="0" @change="updateServiceConfigFun" />
          </div>
          <div class="gray-block jzt-flex-bt pt10 pb10 pl20 pr20">
            <div class="jzt-flex-center">
              <p class="mr10">{{ switchObj.isDistribution ? "" : "不" }}支持配送服务</p>
              <a-tag color="#e3f9e9" size="small" v-if="switchObj.isDistribution === 1" style="color: #14c85c">
                <icon-check-circle-fill />已启用
              </a-tag>
            </div>
            <a-switch
              v-model="switchObj.isDistribution"
              :checked-value="1"
              :unchecked-value="0"
              @change="updateServiceConfigFun"
            />
          </div>
          <div class="gray-block jzt-flex-bt pt10 pb10 pl20 pr20">
            <div class="jzt-flex-center">
              <p class="mr10">{{ switchObj.isInstall ? "" : "不" }}支持安装服务</p>
              <a-tag color="#e3f9e9" size="small" v-if="switchObj.isInstall === 1" style="color: #14c85c">
                <icon-check-circle-fill />已启用
              </a-tag>
            </div>
            <a-switch v-model="switchObj.isInstall" :checked-value="1" :unchecked-value="0" @change="updateServiceConfigFun" />
          </div>
          <div class="gray-block jzt-flex-bt pt10 pb10 pl20 pr20">
            <div class="jzt-flex-center">
              <p class="mr10">生产周期按自然日（节假日周末{{ switchObj.isCycle ? "" : "不" }}顺延）</p>
              <a-tag color="#e3f9e9" size="small" v-if="switchObj.isCycle === 1" style="color: #14c85c">
                <icon-check-circle-fill />已启用
              </a-tag>
            </div>
            <a-switch v-model="switchObj.isCycle" :checked-value="1" :unchecked-value="0" @change="updateServiceConfigFun" />
          </div>
        </div>
      </template>
      <a-empty v-else description="这里暂时什么都没有" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from "vue";
import {
  categoryList,
  getCategoryCycleTree,
  getServiceConfigInfo,
  updateCategoryCycle,
  updateServiceConfig
} from "@/apis/mallConfig/cycle-time";
import { Message } from "@arco-design/web-vue";
import { treeToArr, findAncestorsById } from "@/utils";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const treeRef = ref();
const switchObj = ref({});
const defaultProps = {
  children: "children",
  label: "name"
};
const data: any = ref([]);
const prodTimeObj = ref([]);
const containerRef = ref(null);
const expendKeys = ref([]);
const defaultSelectedKeys = ref([""]);
const handleClick = e => {
  e.preventDefault();
};

onMounted(() => {
  getSwitch();
  getTree();
});

const getSwitch = () => {
  getServiceConfigInfo({ factoryId: route.query.factoryId }).then(res => {
    if (res.code === 200) {
      switchObj.value = res.data;
    }
  });
};

const getTree = async (isInit = true) => {
  await categoryList({ factoryId: route.query.factoryId }).then(res => {
    if (res.code === 200) {
      data.value = res.data;
      nextTick(() => {
        isInit && clickNode([], { node: data.value[0] });
        defaultSelectedKeys.value = [data.value[0].categoryId];
      });
    }
  });
};

const clickNode = async (selectedKeys, { node }) => {
  console.log(999999, node);
  defaultSelectedKeys.value = [node.categoryId];
  const parentArr = findAncestorsById(node.categoryId, data.value, "categoryId");
  await getCategoryCycleTreeFun(parentArr[0].categoryId);
};

const getCategoryCycleTreeFun = async categoryId => {
  await getCategoryCycleTree({ categoryId: categoryId, factoryId: route.query.factoryId }).then(res => {
    if (res.code === 200) {
      console.log("分类的生产周期数据===", res.data);
      prodTimeObj.value = res.data;
    }
  });
};

const submit = () => {
  const arr = treeToArr([prodTimeObj.value]);
  const params = arr.map(item => {
    return {
      categoryId: item.categoryId,
      days: item.days
    };
  });
  updateCategoryCycle({ factoryId: route.query.factoryId, reqs: params }).then(async res => {
    if (res.code === 200) {
      Message.success("保存成功");

      await getTree(false);
      clickNode([], { node: prodTimeObj.value });
    }
  });
};

const updateServiceConfigFun = () => {
  updateServiceConfig({ ...switchObj.value, factoryId: route.query.factoryId })
    .then(res => {
      if (res.code === 200) {
        Message.success("基础服务设置成功");
      }
    })
    .finally(() => {
      getSwitch();
    });
};
</script>

<style lang="scss" scoped>
h3.title {
  margin: 20px 0 20px 20px;
  color: #131414;
  .icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #409eff;
    margin: 0 8px 3px 0;
  }
}
:deep(.arco-empty) {
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:deep(.arco-collapse) {
  border: none;
  .arco-collapse-item {
    border-bottom: none;
  }
  .arco-collapse-item-header.arco-collapse-item-header-right {
    background-color: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .arco-collapse-item-active > .arco-collapse-item-header .arco-collapse-item-icon-right .arco-collapse-item-expand-icon {
    transform: rotate(90deg);
  }
  .arco-icon-hover.arco-collapse-item-icon-hover.arco-collapse-item-icon-right {
    transform: rotate(180deg);
    top: 38%;
  }
  .arco-collapse-item .arco-collapse-item-icon-right {
    right: 6px;
  }
  .arco-collapse-item-header-title {
    width: 100%;
  }
}

:deep(.arco-alert-icon) {
  svg {
    font-size: 28px;
  }
}
.cycle-time {
  height: calc(100vh - 200px);
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 20px;
  background: linear-gradient(180deg, #e0eefe 0%, #f6f9ff 100%);
  .left-out {
    display: grid;
    grid-template-columns: 260px 1fr;
    overflow-y: auto;
    min-width: 700px;
    background-color: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  }
  .right-out {
    background-color: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    header {
      border-bottom: 1px solid #c2d4e8;
    }
    .content {
      .gray-block {
        background-color: #f5f7fa;
        border-radius: 4px;
        margin-bottom: 20px;
      }
    }
  }
  .left {
    overflow-y: auto;
    border-right: 1px solid #c2d4e8;
    :deep(.el-tree.jzt-tree > .el-tree-node) {
      .el-tree-node__content {
        margin-bottom: 8px;
      }

      .el-anchor__link {
        color: #131414;
      }
    }
    :deep(.el-tree.jzt-tree > .el-tree-node > .el-tree-node__children) {
      .el-icon {
        position: absolute;
        left: 16px;
      }
      & > .el-tree-node > .el-tree-node__content {
        & > p .el-anchor__link {
          padding-left: 42px;
        }
      }
      & > .el-tree-node > .el-tree-node__children {
        & > .el-tree-node > .el-tree-node__content {
          padding-left: 0 !important;
          & > p .el-anchor__link {
            padding-left: 54px;
          }
        }
      }
    }
    :deep(.el-tree-node__content) {
      height: 32px;
      & > p {
        flex: 1;
      }
    }
    :deep(.el-anchor__list) {
      padding-left: 0 !important;
    }
    :deep(.el-anchor__link.is-active) {
      background-color: #d9e8ff;
      color: #007dff !important;
    }
    :deep(.el-tree-node > .el-tree-node__content) {
      .el-anchor__link {
        padding-right: 10px;
        font-size: 14px;
        .node-wrap {
          display: grid;
          grid-template-columns: 1fr 60px;
          & > div {
            text-align: right;
          }
        }
        .el-tag {
          border: 1px solid white;
        }
      }
    }
    :deep(.el-tree-node.is-current > .el-tree-node__content) {
      .el-anchor__link {
        color: #007dff !important;
      }
    }
  }
  .right {
    position: relative;
    padding-bottom: 64px;
    header {
      border-bottom: 1px solid #c2d4e8;
      position: sticky;
      top: 0;
      z-index: 2;
      background-color: white;
      :deep(.el-input__wrapper) {
        background-color: white;
      }
    }
    footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 64px;
      box-shadow: 0px -5px 10px 0px rgba(66, 78, 102, 0.15);
    }
    :deep(.el-alert.el-alert--warning) {
      background-color: #e3f0fe;
      color: #0052d9;
      p {
        color: #606266;
        font-size: 12px;
        line-height: 22px;
      }
      .el-alert__close-btn {
        top: calc(50% - 8px);
      }
    }
    :deep(.el-input-number) {
      .el-input-number__decrease,
      .el-input-number__increase {
        background-color: white;
        border-radius: 4px;
        border: 1px solid #dcdcdc;
        &:hover ~ .el-input:not(.is-disabled) .el-input__wrapper {
          box-shadow: none;
        }
      }
      .el-input__wrapper {
        box-shadow: none !important;
      }
      .el-input__inner {
        background-color: white;
        border-radius: 4px;
        border: 1px solid #dcdcdc;
      }
    }
    :deep(.el-collapse) {
      border: none;
      .el-collapse-item {
        margin-bottom: 10px;
        .el-collapse-item__header {
          background-color: #f5f7fa;
          border: none;
          height: 40px;
          line-height: 40px;
          padding-left: 12px;
          border-radius: 4px;
          color: #4e5969 !important;
          .time-wrap {
            color: #86909c;
          }
        }
        .el-collapse-item__wrap {
          border: none;
        }
      }
      .el-collapse-item__content {
        padding: 20px 12px 0 12px;
        .el-input__wrapper {
          background-color: white;
        }
        .jzt-flex-bt {
          color: #4e5969;
          .time-wrap {
            color: #86909c;
          }
        }
      }
    }
  }
}
</style>
